<template>
	<view class="login">
		<view class="bg"></view>
		<view class="my" @click="onUpdateInfo">
			<view class="my_img">
				<img :src="img" v-if="img" alt="">
				<img src="../../static/images/grzx.png" alt="" v-else>
			</view>
			<view class="name" v-if="userData">
				{{ userData.user.userName }}
				<text v-if="userType == 'coach'">（教练员）</text>
				<text v-else>（学员）</text>
			</view>
		</view>
		<view class="form_box">
			<view class="form_bo_wrap">
				<view class="list" v-if="userType == 'coach'">
					<view class="item" v-for="item in coachList" :key="item.id" @click="onNav(item.id)">
						<u-icon :label="item.name" size="30" :name="item.icon"></u-icon>
						<u-icon name="arrow-right" size="20"></u-icon>
					</view>
				</view>
				<view class="list" v-else>
					<view class="item" v-for="item in traineeList" :key="item.id" @click="traineeOnNav(item.id)">
						<u-icon :label="item.name" size="30" :name="item.icon"></u-icon>
						<u-icon name="arrow-right" size="20"></u-icon>
					</view>
				</view>
			</view>

			<view class="u-page__button-item">
				<u-button text="退出登录" size="normal" type="primary" @click="logOut"></u-button>
			</view>
		</view>

		<u-modal title="修改信息" :show="show" showCancelButton closeOnClickOverlay @confirm="confirm" @cancel="cancel"
			@close="close">
			<u--form labelPosition="left" :model="userInfo" ref="uForm" labelWidth="70">
				<u-form-item label="用户名" prop="userInfo.name" borderBottom ref="item1">
					<u--input v-model="userInfo.userName" border="none"></u--input>
				</u-form-item>
				<u-form-item label="密码" prop="userInfo.password" borderBottom ref="item1">
					<u--input v-model="userInfo.password" border="none"></u--input>
				</u-form-item>
				<u-form-item label="联系电话" prop="userInfo.concatNumber" borderBottom ref="item1">
					<u--input v-model="userInfo.concatNumber" border="none"></u--input>
				</u-form-item>
			</u--form>
		</u-modal>

	</view>
</template>

<script>
import { updateInfo } from '../../common/api'
export default {
	data() {
		return {
			show: false,
			coachList: [
				{
					id: 1,
					name: "学员管理",
					icon: "../../static/images/xygl.png"
				},
				{
					id: 2,
					name: "车辆管理",
					icon: "../../static/images/clgl.png"
				},
				{
					id: 3,
					name: "课时管理",
					icon: "../../static/images/ksgl.png"
				},
				// {
				// 	id: 4,
				// 	name: "预约管理",
				// 	icon: "../../static/images/yygl.png"
				// },
				{
					id: 5,
					name: '资源查看',
					icon: '../../static/images/jxzy.png'
				},
				{
					id: 7,
					name: '地图查看',
					icon: '../../static/images/map.png'
				},
				{
					id: 8,
					name: '我的评论',
					icon: '../../static/images/pl.png'
				},
				{
					id: 9,
					name: '预约管理',
					icon: '../../static/images/yygl.png'
				},
			],
			traineeList: [
				{
					id: 1,
					name: '教练查看',
					icon: '../../static/images/xygl.png'
				},
				{
					id: 2,
					name: '车辆查看',
					icon: '../../static/images/clgl.png'
				},
				{
					id: 3,
					name: '课时查看',
					icon: '../../static/images/ksgl.png'
				},
				// {
				// 	id: 4,
				// 	name: '预约报名',
				// 	icon: '../../static/images/yygl.png'
				// },
				{
					id: 5,
					name: '模拟练习',
					icon: '../../static/images/mnlx.png'
				},
				{
					id: 6,
					name: '资源查看',
					icon: '../../static/images/jxzy.png'
				},
				{
					id: 7,
					name: '地图查看',
					icon: '../../static/images/map.png'
				},
				{
					id: 9,
					name: '我的预约',
					icon: '../../static/images/jxzy.png'
				},
			],
			userType: uni.getStorageSync('userType'),
			userData: uni.getStorageSync('userData'),
			userInfo: {
				userName: '',
				password: '',
				concatNumber: ''
			},
			img: null,
		}
	},
	onLoad() {
		let data = JSON.parse(JSON.stringify(this.userData))
		this.img = data.user.avatar
		console.log(data.user.avatar, 'data===');
	},
	mounted() {
		
	},
	methods: {
		onNav(id) {
			if (id == 1) {
				uni.navigateTo({
					url: '/pages/student/student'
				});
			} else if (id == 2) {
				uni.navigateTo({
					url: '/pages/car/car'
				});
			} else if (id == 3) {
				uni.navigateTo({
					url: '/pages/classHour/classHour'
				});
			} else if (id == 4) {
				uni.navigateTo({
					url: '/pages/subscribe/subscribe'
				});
			} else if (id == 5) {
				uni.navigateTo({
					url: '/pages/resource/resource'
				});
			} else if (id == 7) {
				uni.navigateTo({
					url: '/pages/wxMap/wxMap'
				});
			} else if (id == 8) {
				uni.navigateTo({
					url: '/pages/comment/comment'
				});
			} else if (id == 9) {
				uni.navigateTo({
					url: '/pages/confirmOrder/confirmOrder'
				});
			}
		},
		traineeOnNav(id) {
			if (id == 1) {
				uni.navigateTo({
					url: '/pages/studentAccount/coachList/coachList'
				});
			} else if (id == 2) {
				uni.navigateTo({
					url: '/pages/studentAccount/carList/carList'
				});
			} else if (id == 3) {
				uni.navigateTo({
					url: '/pages/studentAccount/classHour/classHour'
				});
			} else if (id == 4) {
				uni.navigateTo({
					url: '/pages/studentAccount/signUp/signUp'
				});
			} else if (id == 5) {
				uni.navigateTo({
					url: '/pages/studentAccount/exam/exam'
				});
			} else if (id == 6) {
				uni.navigateTo({
					url: '/pages/resource/resource'
				});
			} else if (id == 7) {
				uni.navigateTo({
					url: '/pages/wxMap/wxMap'
				});
			} else if (id == 9) {
				uni.navigateTo({
					url: '/pages/studentAccount/myOrder/myOrder'
				});
			}
		},
		async confirm() {
			this.show = false
			console.log(this.userInfo, 'confirm');
			console.log(this.userData, 'userData');
			console.log(this.userType, 'userType');
			
			let params = {
				userName: this.userInfo.userName,
				password: this.userInfo.password,
				concatNumber: this.userInfo.concatNumber,
				userId: this.userType == 'trainee' ? this.userData.user.traineeId : this.userData.user.coachId,
				userType: this.userData.userType,
				address: this.userData.user.address,
				age: this.userData.user.age,
				applicationLevel: this.userData.user.applicationLevel,
				avatar: this.userData.user.avatar,
				contactNumber: this.userData.user.contactNumber,
				createdBy: this.userData.user.createdBy,
				createdTime: this.userData.user.createdTime,
				gender: this.userData.user.gender,
				graduationDate: this.userData.user.graduationDate,
				idNumber: this.userData.user.idNumber,
				name: this.userData.user.name,
				password: this.userData.user.password,
				state: this.userData.user.state,
				traineeId: this.userData.user.traineeId,
				updatedBy: this.userData.user.updatedBy,
				updatedTime: this.userData.user.updatedTime,
			}
			let res = await updateInfo(params)
			uni.$u.toast('修改成功')
			uni.setStorageSync('userData', res)
			this.userName = res.user.userName
		},
		cancel() {
			this.show = false
			console.log('cancel');
		},
		close() {
			this.show = false
			console.log('close');
		},
		onUpdateInfo() {
			this.show = true
		},
		logOut() {
			console.log(1111);
			uni.removeStorageSync('userData'); 
			uni.removeStorageSync('userType'); 
			uni.navigateTo({
				url: '/pages/register/register'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.login {
	.bg {
		width: 100%;
		height: 400rpx;
		background: url('../../static/images/my_dcjx.png') no-repeat;
		background-size: 100% 100%;
	}

	.my {
		position: absolute;
		top: 100rpx;
		display: flex;
		align-items: center;
		margin-left: 32rpx;

		img {
			width: 100rpx;
			height: 100rpx;
			border-radius: 100%;
		}

		.name {
			font-size: $uni-font-size-medium;
			font-weight: bold;
			margin-left: 28rpx;
		}
	}

	.form_box {
		width: 100%;
		position: absolute;
		top: 280rpx;

		.form_bo_wrap {
			width: 640rpx;
			margin: 0 auto;
			padding: 50rpx 32rpx;
			box-shadow: 0px 0px 5px #333333;
			border-radius: 20rpx;
			background: #fff;

			.list {
				.item {
					display: flex;
					justify-content: space-between;
					margin-bottom: 42rpx;
				}

				.item:last-child {
					margin-bottom: 0;
				}
			}
		}

		.u-page__button-item {
			padding: 0 26rpx;
			margin-top: 100rpx;
		}
	}
}
</style>
